@use 'styles/helpers' as *;

$transparent-color: rgba(255, 255, 255, 0);
$hatch-color: $surface_300;
//
$spread-radius: -23px;
$blur-radius: 20px;
$vert-offset: 22px;

@mixin line-hatch($color) {
  background-image: linear-gradient(45deg, $transparent-color 40%, $color 40%, 
  $color 50%, $transparent-color 50%, 
  $transparent-color 90%, $color 90%, 
  $color 100%);
  background-size: 7.07px 7.07px;
}

@mixin dot-hatch($color) {
  // background: white;
  background-image: radial-gradient($color 1px, transparent 0);
  background-size: 8px 8px;
  background-position: -19px -19px;
}

.wrapper {
  //width: 100%;
  border-radius: $border-radius;
  padding: 16px;
  background-color: $color-surface-card;
  &.bordered {
    border: 1px solid black;
    border-color: $color-surface-border;
  }

  &.hatchLine {
    @include line-hatch($hatch-color);
  }

  &.hatchDots {
    @include dot-hatch($hatch-color);
  }

  &.elevated {
    box-shadow: 0px $vert-offset $blur-radius $spread-radius rgba(0,0,0,0.39);
    -webkit-box-shadow: 0px $vert-offset $blur-radius $spread-radius rgba(0,0,0,0.39);
    -moz-box-shadow: 0px $vert-offset $blur-radius $spread-radius rgba(0,0,0,0.39);
  }

  &.bgMedium {
    background-color: $color-surface-ground;
  }

  &.bgContrast {
    background-color: $color-surface-ground;
  }
}